<template>
  <div class="index-content content border-box">
    <el-row :gutter="10">
      <el-col v-for="(item, index) in itemImfo" :key="index" :lg="6" :xs="12">
        <top-item :itemInfo="item"></top-item>
      </el-col>
    </el-row>
    <card title="近七天用户注册数统计" class="mt-mb-12">
      <template #main>
        <div id="indexChart1" ref="indexChart1" class="index-charts border-box"></div>
      </template>
    </card>
    <div class="charts-wrap">
      <div class="left mr-12">
        <card title="用户男女比例统计">
          <template #main>
            <div id="indexChart2" ref="indexChart2" class="index-charts border-box"></div>
          </template>
        </card>
      </div>
      <div class="right">
        <card title="标签创建比例">
          <template #main>
            <div id="indexChart3" ref="indexChart3" class="index-charts border-box"></div>
          </template>
        </card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import topItem from './components/top-item.vue'
import *  as echarts from 'echarts'
import card from '../../components/card/index.vue'
import { getStatisticsNum } from '../../api/statistics'
import { getGendersNum, getSevenNumber } from '../../api/user'
import { getTagsRate } from '../../api/tag'
//顶部数据
const itemImfo = reactive([
  {
    title: '总用户',
    num: 12345,
    icon: 'user'
  },
  {
    title: '标签数',
    num: 12345,
    icon: 'connection'
  },
  {
    title: '动态数',
    num: 12345,
    icon: 'discount'
  },
  {
    title: '评论数',
    num: 12345,
    icon: 'editPen'
  },

])
getStatisticsNum({}).then((res:any) => {
  itemImfo[0].num = res.data.users
  itemImfo[1].num = res.data.tags
  itemImfo[2].num = res.data.triends
  itemImfo[3].num = res.data.comments
}).catch((err:any) => {
  console.log(err)
})
//图标数据
const option1 = reactive({
  title: {
    text: '近七天用户注册数统计',
    show: false
  },
  tooltip: {},
  xAxis: {
    data: [2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7],
    name: '时间(单位/天)',
    axisLabel: {
      fontSize: 12,
    }
  },
  yAxis: {
    name: '用户数量（单位/人)',
    splitLine: {
      show: true,
      dashOffset: 0,
      lineStyle: {
        color: '#e3e5ed'
      }
    }
  },
  grid: {
    top: 15,
    left: 30,
    right: 15,
    bottom: 30
  },
  series: [
    {
      data: [103, 222, 288, 235, 194, 207, 345],
      type: 'line',
      areaStyle: {}
    },
  ]
})

const option2 = reactive({
  title: {
    text: '用户比例统计',
    show: false
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '90%',
    left: 'center'
  },
  series: [
    {
      name: '性别',
      type: 'pie',
      radius: ['40%', '63%'],
      data: [
        { value: 1448, name: '男' },
        { value: 735, name: '女' },
        { value: 580, name: '未知' },
      ]
    }
  ]
})
const option3 = reactive({
    title: {
      text: '标签创建比例',
      show: false
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '90%',
      left: 'center'
    },
    series: [
      {
        name: '类型',
        type: 'pie',
        radius: ['40%', '63%'],
        data: [
          { value: 1448, name: '管理员' },
          { value: 735, name: '小程序用户' },
        ]
      }
    ]
  })
onMounted(async () => {

  //第一个图表
  var myChart1 = echarts.init(document.getElementById('indexChart1'));
  const result1 = await getSevenNumber()
  option1.xAxis.data = result1.data.date
  option1.series[0].data = result1.data.num
  myChart1.setOption(option1);

  //第二个图表,获取用户男女比例
  var myChart2 = echarts.init(document.getElementById('indexChart2'));
  const gender = await getGendersNum()
  option2.series[0].data = gender.data
  myChart2.setOption(option2)
  //第三个图表，标签创建比例
  var myChart3 = echarts.init(document.getElementById('indexChart3'));
  const result3 = await getTagsRate({})
  option3.series[0].data = result3.data
  myChart3.setOption(option3)
})

</script>

<style lang="less" scoped>
.index-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .index-charts {
    width: 100%;
    height: 300px;
  }
}

.charts-wrap {
  .left {
    width: 49.5%;
    float: left;
  }

  .right {
    width: 49.5%;
    float: right;
  }
}
</style>
